//清单计量汇总
<template>
  <div>
    <el-table
      :data="settlementList"
      class="ccui-form-child-table"
      border
      max-height="99999"
      show-summary
      :summary-method="getSummaries"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column label="序号" width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <template v-for="(table, i) in unfixedTableThead">
        <el-table-column
          :fixed="table.fixed || false"
          :type="table.type"
          :key="'one' + i"
          :label="table.label"
          :align="table.align || 'left'"
          :header-align="table.headerAlign || 'left'"
          :min-width="table.width"
          :prop="table.prop"
          :show-overflow-tooltip="true"
          border="true"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "materialsManagementInventory",
  props: {
    responsibility: {
      type: String,
      default: ""
    },
    taxRate: {
      type: String,
      default: ""
    },
    settlementList: {
      type: Array
    }
  },
  data() {
    return {
      tableData: [],
      form: {
        currAmountTax: ""
      },
      informationBool: false,
      detailBool: false,
      adjustBool: false,
      claimBool: false,
      paymentsBool: false,
      typeDict: [],
      unfixedTableThead: [
        {
          label: "设备物资编码",
          prop: "materialCode",
          width: "120"
        },
        {
          label: "验收单编号",
          prop: "acceptCode",
          width: "130"
        },

        {
          label: "设备物资名称",
          prop: "materialName",
          width: "180"
        },
        {
          label: "设备物资说明",
          prop: "materialState",
          width: "120"
        },
        {
          label: "计量单位",
          prop: "unitPriceWithTax",
          width: "120"
        },

        {
          label: "验收日期",
          prop: "acceptTime",
          width: "120"
        },
        {
          label: "剩余可结算数量",
          prop: "acceptCount",
          width: "150"
        },
        {
          label: "冲销数量",
          prop: "writeCount",
          width: "120"
        }
      ]
    };
  },
  created() {},
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (column.label == "验收数量" || column.label == "冲销数量") {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " ";
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    },
    // 金额四舍五入 8位小数
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 金额四舍五入
    numberFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 4);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 删除
    delTable(index, row) {
      this.settlementList.splice(index, 1);
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.extend-btn {
  text-align: right;
  margin-bottom: 15px;
  top: 0px;
  position: relative !important;
}
/deep/.group-content {
  margin: 0;
}
/deep/.ccui-form {
  margin: 10px;
}
/deep/.el-table .el-table__body-wrapper .el-table__body tr td {
  padding: 12px 0;
}
</style>
